<template>
	<view class="page-height">
		<i-top-bar title="地址管理"> </i-top-bar>
		<view class="page-content" v-if="show">
			<view class="list" v-if="data_list.length">
				<view class="item" v-for="(item,index) in data_list" :key="index" @click="onClickItem(item)">
					<view class="name-line">
						<text class="text">{{item.receiver}}</text>
						<text class="text">{{item.mobile}}</text>
						<image src="@/static/images/edit.png" class="edit" @click.stop="onEditItem(item)"></image>
					</view>
					<text class="address">{{item.address}}</text>
				</view>
			</view>
			<view class="list" style="margin-top: 100rpx;" v-else>
				<i-empty></i-empty>
			</view>

			<view class="btn-view">
				<button class="btn" @click="$refs.add_address.show()">新增地址</button>
			</view>


		</view>
		<u-toast ref="uToast"></u-toast>
		<add-address ref="add_address" @seccess="getList('init')"></add-address>
	</view>
</template>
<script>
	import AddAddress from "./components/add-address.vue"
	export default {
		components: { AddAddress },
		data() {
			return {
				show:false,
				type: 'view',
				data_list: [],

			};
		},

		onLoad(option) {
			if (option.type) this.type = option.type
			this.getList('init')
			uni.$on('address-success', () => {
				this.getList('init')
			})
		},
		onPullDownRefresh() {
			this.getList('init')
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onUnload() {
			uni.$off("address-success")
		},

		methods: {
			getList() {
				this.api.post("/api/address/index").then(res => {
					this.data_list = res
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
					this.show = true
				})
			},
			onClickItem(item) {
				if (this.type === 'view') this.onEditItem(item)

				if (this.type === 'select') {
					uni.$emit("select-address", item)
					this.goBack()
				}
			},
			onEditItem(item) {
				this.openWin(`/pages/user/edit-address?id=${item.id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
	}

	.list {
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			flex-direction: column;
			background-color: #ffffff;
			margin-bottom: 12rpx;
			padding: 30rpx;

			.name-line {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					color: #333333;
					margin-right: 20rpx;
				}

				.edit {
					width: 30rpx;
					height: 30rpx;
					margin-left: auto;

				}
			}

			.address {
				font-size: 28rpx;
				color: #333333;
				margin-top: 10rpx;
			}

		}

	}

	.btn-view {
		padding: 50rpx 30rpx 100rpx;
	}
</style>